import { useEffect,useRef } from 'react';
let BMapGL = window.BMapGL

interface IProps {
    position: string
}

const Maps = ({ position }: IProps) => {
    let container = useRef(null)
    useEffect(() => {


        const map = new BMapGL.Map(container.current)
        const point = new BMapGL.Point(116.404, 39.915)
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.centerAndZoom(point, 12)



        if (position) {
            var myGeo = new BMapGL.Geocoder();
            // 将地址解析结果显示在地图上，并调整地图视野
            myGeo.getPoint(position, function (point:any) {
                if (point) {
                    //缩放大小
                    map.centerAndZoom(point, 16);
                    //添加标记
                    map.addOverlay(new BMapGL.Marker(point, { title: '北京市海淀区上地10街' }))
                }
            }, position)
        } else {
            // 开启SDK辅助定位
            var geolocation = new BMapGL.Geolocation();
            geolocation.enableSDKLocation();
            geolocation.getCurrentPosition(function (r: any) {
                if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                    var mk = new BMapGL.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                }

            });
        }
        if (position.split(" ").length !== 2) {
            var dist = new BMapGL.DistrictLayer({
                name: `(${position.split(" ")[1] + position.split(" ")[2]})`,
                strokeColor: '#000',
                strokeWeight: 2,
                strokeOpacity: 0.5,
                fillOpacity: 0.2,
                kind: 2
            }, () => {

            })
            map.addDistrictLayer(dist);
        }




    })
    return (
        <div ref={container} className='w-90 h-90'>
           
        </div>
    );
};

export default Maps;